<template>
	<view class="container">
		<!-- <view class="status_bar">
		</view> -->
		<view class="mine_body" :style="'background-image:url(' + baseUrl + 'publicImg/mine/background.jpg);'">
			<view class="mine_body_info">
				<view class="mine_body_info_head">
					<image class="mine_body_info_head_img" :src="headImg"></image>
				</view>
				<view class="mine_body_info_text">
					<view>{{userId + " " + userName}}</view>
					<view style="font-size: 13px;font-weight: 100;">
						<text>{{depName}}</text>
					</view>
				</view>
			</view>
			<view class="mine_body_action">
				<!-- TODO 待定 -->
				<!-- <button type="default" @click="handleMenuClick(1)">
					<view>
						<image :src="baseUrl + 'publicImg/mine/icon_4.png'"></image>
						<view>个人信息</view>
					</view>
					<view>></view>
				</button> -->
				<button type="default" @click="handleMenuClick(2)">
					<view>
						<image :src="baseUrl + 'publicImg/mine/icon_1.png'"></image>
						<view>消息通知</view>
					</view>
					<view>></view>
				</button>
				<!-- <button type="default" @click="handleMenuClick(3)">
					<view>
						<image :src="baseUrl + 'publicImg/mine/icon_2.png'"></image>
						<view>系统设置</view>
					</view>
					<view>></view>
				</button> -->
				<!-- <button type="default" @click="handleMenuClick(4)">
					<view>
						<image :src="baseUrl + 'publicImg/mine/icon_2.png'"></image>
						<view>关于我们</view>
					</view>
					<view>></view>
				</button> -->
				<button type="default" @click="handleLogout">
					<view>
						<image :src="baseUrl + 'publicImg/mine/icon_3.png'"></image>
						<view>退出登录</view>
					</view>
				</button>
			</view>
		</view>

		<tab-bar :current="3" />
	</view>
</template>

<script>
	import TabBar from "../../components/tabBar/tabBar.vue";
	import {
		getUserId,
		getUserName
	} from "../../common/commonUnits";

	export default {
		components: {
			TabBar
		},
		data() {
			return {
				menuList: [{
						id: 1,
						name: '个人信息',
						// icon: '/static/images/icon.png',
						url: '/pagesOne/pages/userInfo/userInfo'
					},
					{
						id: 2,
						name: '消息通知',
						// icon: '/static/images/icon.png',
						url: '/pagesOne/pages/userInfo/messages'
					},
					{
						id: 3,
						name: '系统设置',
						// icon: '/static/images/icon.png',
						url: '/pagesOne/pages/userInfo/settings'
					},
					{
						id: 4,
						name: '关于我们',
						// icon: '/static/images/icon.png',
						url: '/pagesOne/pages/userInfo/about'
					},
				],
				userId: "",
				userName: "",
				depName: '默认组织', //部门名称
				baseUrl: this.$commonUnits.baseUrl,
				headImg: this.$commonUnits.baseUrl + 'publicImg/mine/mine.png',
			};
		},
		onLoad() {
			// 页面加载时的逻辑
			this.userId = uni.getStorageSync("user_info").code;
			this.userName = uni.getStorageSync("user_info").name;
			this.depName = uni.getStorageSync("user_info").sysOrgName;
		},
		methods: {
			// 菜单项点击处理
			handleMenuClick(e) {
				const item = this.menuList[e - 1];
				if (item.url) {
					// 跳转到对应的页面
					uni.navigateTo({
						url: item.url,
						fail: (err) => {
							uni.showToast({
								title: '页面跳转失败',
								icon: 'none'
							});
						}
					});
				}
			},

			// 退出登录处理
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '退出中...'
							});

							// 清除本地存储的登录信息
							uni.removeStorageSync('userInfo');
							setTimeout(() => {
								uni.hideLoading();
								// 跳转到登录页面
								uni.reLaunch({
									url: '/pages/login/login'
								});
							}, 1000);
						}
					}
				});
			}

		}
	};
</script>
<style>
	.container {
		font-size: 14px;
		background-color: #F1F2F3;
		color: black;
	}

	.status_bar {
		background: #00428e;
		height: 38px;
		width: 100%;
	}

	.mine_body {
		background-repeat: no-repeat;
		background-size: 100%;
		color: white;
		line-height: 54px;
		text-align: center;
		min-height: calc(100vh - 38px);
	}

	.mine_body_info {
		display: flex;
		flex-direction: row;
		justify-content: left;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		padding-top: 7vh;
		margin-left: 30px;
	}

	.mine_body_info_head {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background-color: #F1F2F3;
	}

	.mine_body_info_head_img {
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.mine_body_info_text {
		margin-left: 30px;
		height: 96px;
		font-size: 20px;
		font-weight: bolder;
	}

	.mine_body_info_text view {
		text-align: left;
		height: 32px;
		line-height: 32px;
	}

	.mine_body_info_text view text {
		display: inline-block;
		width: 25vw;
		/* 设置固定长度 */
		overflow: hidden;
		/* 隐藏溢出的内容 */
		text-overflow: ellipsis;
		/* 溢出内容显示为省略号 */
		white-space: nowrap;
		/* 不换行 */
		margin-right: 10px;
	}

	.mine_body_action {
		margin-top: 40px;
		padding: 0 10px;
	}

	.mine_body_action button {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
		height: 50px;
		line-height: 50px;
		font-size: 14px;
		background: white;
		border-radius: unset;
	}

	.mine_body_action button::after {
		border-radius: unset;
	}

	.mine_body_action button:first-child {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.mine_body_action button:last-child {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.mine_body_action button image {
		width: 20px;
		height: 20px;
		padding: 15px 0;
	}

	.mine_body_action button view view {
		margin-left: 10px;
		float: right;
	}
</style>